<template>
  <el-dialog :visible.sync="currentShowFlag" append-to-body fullscreen :close-on-click-modal="false" :close-on-press-escape="false" @open="handleDialogOpen" @closed="handleDialogClosed">
    <div slot="title" class="detail-dialog__header">{{$t($route.meta.title) + '详情'}}</div>
    <simple-form ref="form" :form-field="formField" v-model="formModel" :grid="{xs: 12, sm: 12, md: 8}" :view-flag="viewFlag"></simple-form>
    <el-tabs v-model="active">
      <el-tab-pane label="异常明细" name="first" :style="{height: containerHeight}">
        <simple-table :pageable="false" isBigdata :table-column="tableColumn" :table-data="tableData" height="400px"></simple-table>
      </el-tab-pane>
    </el-tabs>
    <div slot="footer">
      <el-button @click="handleDialogClose">{{$t('operation.close')}}</el-button>
    </div>
  </el-dialog>
</template>
<script>
const BASEURL = {
  item: `/web/SysAdmin/ajax.html?sys_method=GetList&sys_objName=Sys_Import_Log_Item&sys_tableName=Sys_Import_Log_Item`
}
export default {
  name: 'log_import_detail',
  data () {
    return {
      active: 'first',
      formModel: {},
      tableColumn: [
        { prop: 'errorinfo', label: '异常信息' }
      ],
      tableData: [],
      containerHeight: '0px'
    }
  },
  computed: {
    currentShowFlag: {
      get () { return this.showFlag },
      set (val) { this.$emit('update:showFlag', val) }
    },
    formField () {
      return [
        {
          prop: 'uploadyear',
          label: '年份',
          type: 'Datepicker',
          component: { type: 'year', valueFormat: 'yyyy' }
        },
        {
          prop: 'uploadquarter',
          label: '季度',
          type: 'Select',
          component: { optionList: this.$getDictList('季度') }
        },
        {
          prop: 'excelname',
          label: 'Excel名称',
          type: 'Input'
        },
        {
          prop: 'uploadorganization',
          label: '企业名称',
          type: 'Input'
        },
        {
          prop: 'createtime',
          label: '上传时间',
          type: 'Input'
        },
        {
          prop: 'createby',
          label: '上传人',
          type: 'Input'
        }
      ]
    }
  },
  props: {
    showFlag: { type: Boolean, default: false },
    viewFlag: { type: Boolean },
    detailData: { type: Object },
    extData: { type: Object }
  },
  methods: {
    handleDialogClose () {
      this.currentShowFlag = false
    },
    handleDialogOpen () {
      this.$nextTick(() => {
        this.calTableHeight()
      })
      this.formModel = Object.assign({}, this.formModel, this.$_.cloneDeep(this.detailData))

      let params = Object.assign({}, { sys_mid: this.extData.sys_mid }, { sys_search: { LogHeadId: this.detailData.id } })
      let loadingFlag = this.$loading({ fullscreen: false, target: this.$el, text: this.$t('tip.systemLoading') })
      this.$axios.post(BASEURL.item, params)
        .then(resp => {
          this.tableData = resp.rows
        })
        .finally(() => {
          loadingFlag.close()
        })
    },
    handleDialogClosed () {
      this.$refs.form.resetFields()
      this.formModel = {}
    },
    calTableHeight () {
      let mainHeight = this.$el.querySelector('.el-dialog__body').offsetHeight - 20
      let formHeight = this.$el.querySelector('.el-form').offsetHeight
      // dialog内容总高度 - 表单高度 - tabbar高度
      this.containerHeight = mainHeight - formHeight - 55 + 'px'
    }
  }
}
</script>
